<template>
	<view class="container">
		<!-- 头部 -->
		<tui-navigation-bar backgroundColor="" :isOpacity="false" >
			<view class="tui-content-box">
				<view>
					<tui-icon name="arrowleft" color="#ffffff" @click="backTo"></tui-icon>
				</view>
				<view class="tui-content-tit">
					<view>分销中心</view>
				</view>
			</view>
		</tui-navigation-bar>
		<view class="user-section">
			<view class="yuncang-top-box">
				<view class="yuncang-tixian">
					<view class="profit">{{indexList.myProfit == 0 ? "0.00" : indexList.myProfit}} <text class="tixian" @click="navto"></text></view>
					<view class="profit-title">我的收益(元)</view>
				</view>
				<view class="yuncang-shouyi">
					<view class="shouyi-item">
						<view class="profit">{{indexList.totalProfit == 0 ? "0.00" : indexList.totalProfit}}</view>
						<view class="profit-title">累计收益(元)</view>
					</view>
					<view class="line"></view>
					<view class="shouyi-item">
						<view class="profit">{{indexList.todayProfit == 0 ? "0.00" : indexList.todayProfit}}</view>
						<view class="profit-title">今日收益(元)</view>
					</view>
					<view class="line"></view>
					<view class="shouyi-item">
						<view class="profit">{{indexList.teamNum}}</view>
						<view class="profit-title">我的团队(人)</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="wrap">
			<navigator class="wrap-item" v-for="(item,index) in wrapList" :key="index" :url="item.path">
				<image :src="item.src" mode=""></image>
				<view class="wrap-title"> 
					{{item.title}}
				</view>
			</navigator>
		</view>
		
	</view>
</template>

<script>

	export default {
		data() {
			return {
				wrapList:[
					{
						title:'分销订单',
						src:'../../static/img/yuncang/my_cloud_orders.png',
						path:'/pages/user/myYunCangOrder?state=0&id=3&orderType=4'
					},
					{
						title:'我的团队',
						src:'../../static/img/yuncang/cloud_my_team.png',
						path:'/pages/user/myTeam'
					},
					{
						title:'我的收益',
						src:'../../static/img/yuncang/cloud_promotion.png',
						path:'/pages/user/PromotionIncome'
					},
				],
				indexList:{}
			}
		},

		onLoad() {
			this.tui.request(
				'/app/profit/index',
				'GET', 
				{
					
				},
				false,
				false,
				false,
			).then(res => {
				if (res.errno == 0) {
					this.indexList = res.data
				}
			}).catch(err => {
				console.log(err)
			})


		},

		methods: {
			//返回
			backTo(){
				uni.navigateBack({
					
				})
			},
			navto(){
				uni.navigateTo({
					url:"/pages/distribution/Withdrawal"
				})
			}
		}
	}
</script>

<style lang='scss'>
	page {
		height: 100%;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-between;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}
	
	
	/*navigation-bar*/
	.navigationBar{
		background: url(../../static/img/yuncang/yuncang.png) no-repeat;
		background-size: 100% 600upx;
	}
	.tui-content-box {
		width: 100%;
		height: 44px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		
	}
		
	.tui-content-tit{
		width: 100%;
		height: 56upx;
		margin: 0 100rpx;
		color: #ffffff;
		font-size: 18px;
		padding: 0 12px;
		text-align: center;
		margin-left: 46rpx;
	}
	
	.tui-search-box {
		width: 100%;
		height: 56upx;
		margin: 0 100rpx;
		border-radius: 18px;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: border-box;
		color: #bfbfbf;
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, .2);
	}
	
	.tui-search-text {
		color: #ffffff;
		padding-left: 10rpx;
	}
	
	
	.container {
		background: #FAFAFA;
		height: 100%;
	}

	.user-section {
		width: 100%;
		/* height: 450upx; */
		background: url(../../static/img/yuncang/yuncang.png) no-repeat;
		background-size:100% 100%;
		padding: 320upx 30upx 30upx;
		position: relative;
		z-index: 10;

		.top-bar{
			padding-top: 10px;
			height: 44px;
			line-height: 44px;
			color: #fff;
			font-size: 22px;
			text-align: center;
		}
	}
	
	.yuncang-top-box{
		/* margin-top: 80upx; */
		color: #fff;
		
		.yuncang-tixian{
			text-align: center;
			.profit{
				position: relative;
				font-size:70upx;
				font-weight:800;
				.tixian{
					position: absolute;
					top: -7px;
					margin-left: 20upx;
					width: 60upx;
					height: 34upx;
					background: url(../../static/img/yuncang/cloud_withdraw.png) no-repeat;
					 background-size: 100% 100%;
				}
			}
			.profit-title{
				font-size:28upx;
				font-weight:500;
			}
		}
		
		.yuncang-shouyi{
			display: flex;
			justify-content: space-around;
			align-content: center;
			
			.shouyi-item{
				@extend %flex-center;
				margin-top: 40upx;
				
				.profit{
					font-size:34upx;
					font-weight:bold;
				}
				.profit-title{
					font-size:20upx;
					font-weight:500;
				}
			}
			
			.line{
				margin-top: 20px;
				width:1px;
				height:70upx;
				background: #fff;
			}
		}
	}
	
	
	.wrap{
		padding: 20upx 60upx;
		@extend %section;
		flex-wrap: wrap;
		padding-bottom: 30px;
		
		.wrap-item{
			width: 28%;
			margin: 40upx 0 0;
			@extend %flex-center;
				
			image{
				width: 50upx;
				height: 48upx;
				margin-bottom: 20upx;
			}	
			
			.wrap-title{
				font-size:28upx;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
		}
	}
</style>
